// 情况通报详情
<template>
    <div class="norificationDetail">
        <!-- 任务信息 -->
        <div :style="{background: $route.query.comeFrom === 'TaskTable' ? '' : '#fff'}">
            <!-- <div class="tip">
                <div class = "tipLeft"></div>
                <div class = "tipTitle" v-text = "'任务信息'"></div>
                <el-button size="mini" type = "text" class = "tipButton" @click = "toggleCards" v-if = "hasReportDetail"><span v-text ="isOpen ? '收起' : '展开'"></span></el-button>
            </div> -->
            <div class = "content">
                <div class = "title" :style="{paddingTop: $route.query.comeFrom === 'TaskTable' ? '' : '20px'}">
                    <span v-text = "'—— ' + taskDetail.title + ' ——'"></span>
                </div>
            </div>
            <div style="background:#fff">
                <div class = "contentTable">
                    <tableComponent ref= "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
                </div>
                <div class = "contentHtml" v-html = "taskDetail.content"></div>
            </div>
            
        </div>
        <!-- 情况通报附件上传 -->
        <div style="margin-top:20px;">
            <UploadFile 
                :title ="'附件'" :subTitle ="''" :showUploadButton ="false"
                :maxNumber ="2048" :maxSize = "1024" :fileTypes ="['DOC', 'DOCX', 'PDF']" 
                :showDleteButton = "false" :fileData = "taskDetail.attachList" />
        </div>
    </div>
</template>
<script>
export default {
    components: {
        UploadFile: () => import('../../comonComponent/uploadFile'),
        tableComponent : () => import('../../comonComponent/table'),
    },
    props:{
        taskDetail: {
            type: Object,
            default: () => {
                return {}
            } 
        },
        hasReportDetail: {
            type: Boolean,
            default: false
        },
        isOpen: {
            type: Boolean,
            default: false
        },
        typeOPtions: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            //表格数据
            tableLabel: [
                { prop : 'type', label : '任务类型', minWidth: '100', fixed : false, render : false, align : 'center'},
                { prop : 'contact', label : '联系人', minWidth: '100 ', fixed : false, render : false, align : 'center'},
                { prop : 'contactInfo', label : '联系方式', minWidth: '100', fixed : false, render : false, align : 'center'},
                { prop : 'completed', label : '完成进度', minWidth: '100', fixed : false, render : false, align : 'center'},
            ],
            tableOption : {
                loading: false,
                stripe: false,
                highlightCurrentRow : false,
                border : true,
                height : '100',
                maxHeight : '',
                resizable: false,
                headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
                cellStyle: {height: '50px', padding: 0 }
            },
        }
    },
    computed:{
        tableData(){
            let data = []
            if (JSON.stringify(this.taskDetail) !== '{}') {
                data.push({
                    type:this.typeOPtions.find(item => this.taskDetail.type === item.itemValue) ? this.typeOPtions.find(item => this.taskDetail.type === item.itemValue).itemName : '',
                    contact: this.taskDetail.contact,
                    contactInfo: this.taskDetail.contactInfo,
                    completed: this.taskDetail.completed.toString() + '/' + this.taskDetail.total.toString(),
                })
            }
            return data
        }
    },
    mounted() {
        if(this.$route.query.comeFrom !== 'TaskTable') {
            this.tableLabel.splice(this.tableLabel.length - 1, 1)
        }
    },
    methods: {
        //展开和收起状态切换
        toggleCards() {
            this.$emit('togglecards')
        }
    }
}
</script>
<style lang="less" scoped>
    .norificationDetail{
        margin-top:20px;
        .tip {
            display: flex;
            padding: 20px;
            align-items: center;
            .tipLeft {
                width: 4px;
                height: 14px;
                background: #3D7fff;
                margin-right: 10px;
            }
            .tipTitle {
                font-weight: 600;
                color: #333333;
                font-size: 16px;
                line-height: 16px;
                flex: 1;
            }
            .tipButton {
                border: 1px solid #3D7FFF;
                color: #3D7FFF;
                width: 70px;
                height: 30px;
                font-weight: 500;
                border-radius: 4px;
            }
        }
        .content{
            max-width: 1080px;
            margin: 0 auto;
            padding: 4px 20px 24px 20px;
            .title {
               text-align: center;
               font-size: 22px;
               font-weight: 500;
               color: #333;
               font-family: PingFangSC-Medium, PingFang SC;
               line-height: 30px;
            }
            .subTitle {
                text-align: center;
                color: #999;
                font-weight: 400;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                line-height: 22px;
                padding:24px 0 46px 0;
            }
            
        }
        .contentTable{
            padding:20px 20px 40px 20px;
        }
        .contentHtml {
            max-width: 1080px;
            margin: 0 auto;
            padding: 4px 20px 24px 20px;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            line-height: 32px;
        }
    }
</style>